<template>
  <div class="box">
    <div class="title">
      <van-icon class="icon" name="arrow-left" @click="returnFn" />
      收付款设置
    </div>
    <div class="content">
      <van-tabs
        v-model="active"
        @click="titleFn"
        sticky
        title-active-color="#D8B88C"
        color="#D8B88C"
        title-inactive-color="var(--textColor)"
        background="var(--backColor)"
        line-width="100px"
      >
        <van-tab v-for="item in info.title" :key="item.id">
          <template #title>
            <div
              class="titleIcon"
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <img :src="item.icon" height="30" alt="" /><span
                style="margin-left: 10px"
                >{{ item.title }}</span
              >
            </div>
          </template>
          <WeixinZhifubao :index="active" v-if="active == 1" />
          <WeixinZhifubao :index="active" v-if="active == 2" />
          <Yinhangka v-if="active == 3" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import weixin from "@/assets/image/weixin.png";
import zhifubao from "@/assets/image/zhifubao.png";
import yinhangka from "@/assets/image/yinhangka.png";
import WeixinZhifubao from "./components/WeixinZhifubao";
import Yinhangka from "./components/Yinhangka";

export default defineComponent({
  setup() {
    const router = useRouter();
    const returnFn = () => {
      router.go(-1);
    };

    const info = reactive({
      title: [
        {
          id: 1,
          title: "微信",
          icon: weixin,
        },
        {
          id: 2,
          title: "支付宝",
          icon: zhifubao,
        },
        {
          id: 3,
          title: "银行卡",
          icon: yinhangka,
        },
      ],
    });

    const active = ref(1);
    const titleFn = (index) => {
      active.value = index + 1;
    };

    return {
      returnFn,
      info,
      active,
      titleFn,
    };
  },
  components: {
    WeixinZhifubao,
    Yinhangka,
  },
});
</script>

<style lang="less" scoped>
.box {
  min-height: 100vh;
  background-color: var(--backColorTwo);
  .title {
    width: 100%;
    height: 60px;
    font-size: 1.125rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #fff;
    background-color: #212121;
    text-align: center;
    line-height: 60px;
    position: relative;
    padding: 0 4%;

    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      font-size: 1.5rem;
      transform: translateY(-50%);
    }
  }
}
/deep/ .van-tabs__wrap {
  height: 60px;
  margin-top: -1px;
}
/deep/ .van-tabs--line {
  height: 60px;
}
/deep/ .van-tabs__content {
  background-color: var(--backColorTwo);
  padding-bottom: 40px;
}
</style>
